<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="jquery-3.1.1.js">
        
    </script>
    <style>
      
      table{
          border:1px solid black;
          width: 600px;
          border-spacing: 0;
          border-collapse: collapse;
          text-align: center;
      }
     
      th{
          width: 200px;
          height: 30px;
          line-height: 30px;
          background-color: black;
          color: white;
          
      }
      tr{
          width:600px;
      }
      
      div{
          width: 600px;
          display: flex;
          justify-content: space-between;
          border: 1px solid black;
          position: relative;
          box-sizing: border-box;
      }
      ul{
          list-style: none;
          margin: 0;
          padding: 0;
          width: 200px;
          text-align: center;
          display: none;
          
      }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>选项一</th>
            <th>选项二</th>
            <th>选项三</th>
        </tr>
          </table>
        <div>
    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
    <ul>
        <li>内容5</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
    <ul>
        <li>内容6</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
     </div>
 
</body>
</html>
<script>
    $(function(){

        $('th').each(function(index){
            $(this).mouseenter(function(){
                var num = $(this).index();
                console.log(num)
                $(this).css('backgroundColor','gray').siblings().css('backgroundColor','black');
                
                $($('ul')[num]).css('display','block').siblings().css('display','none')
                $('ul')[num].style.marginLeft = 200　* num + 'px';

            })
        })

    })
</script>